<template>
	<view class="pagesBig">
		<!-- 学生管理 - 个人信息展示 -->
		<u-navbar back-icon-color="#fff" :is-back="true" :border-bottom="false" title="学生详情" title-color="#fff"
			:title-size="40"></u-navbar>

		<!-- 信息展示 -->
		<view>
			<text>姓名</text>
			<u-input v-model="stutentPersonalData.name" :clearable="false" type="text" :border="false" />
		</view>
		<view class="title-count-icon" @click="show4=true">
			<text>性别</text>
			<view>
				<view>{{chooseSex.label}}</view>
				<u-icon name="plus-circle" color="#2979ff" size="35" style="margin-right: 50rpx;"></u-icon>
			</view>
		</view>
		<view class="title-count-icon" @click="show5=true">
			<text>年级</text>
			<view>
				<view>{{chooseGrade.title}}</view>
				<u-icon name="plus-circle" color="#2979ff" size="35" style="margin-right: 50rpx;"></u-icon>
			</view>
		</view>
		<view class="title-count-icon" @click="show3=true">
			<text>班级</text>
			<view>
				<view>{{chooseClass.title}}</view>
				<u-icon name="plus-circle" color="#2979ff" size="35" style="margin-right: 50rpx;"></u-icon>
			</view>
		</view>
		<view class="title-count-icon">
			<text>个人电话</text>
			<view>
				<u-input v-model="stutentPersonalData.phone" :clearable="false" type="text" :border="false" />
				<u-icon @click="callPhone(stutentPersonalData.phone)" name="phone" color="#2979ff" size="35"
					style="margin-right: 50rpx;"></u-icon>
			</view>
		</view>
		<view>
			<text>身份证号</text>
			<u-input v-model="stutentPersonalData.idcard" :clearable="false" type="text" :border="false" />
		</view>
		<view class="title-count-icon" @click="show=true">
			<text>状态</text>
			<view>
				<view>{{chooseStatus.label}}</view>
				<u-icon name="plus-circle" color="#2979ff" size="35" style="margin-right: 50rpx;"></u-icon>
			</view>
		</view>
		<view class="title-count-icon" @click="show2=true">
			<text>班主任</text>
			<view>
				<!-- <view>{{chooseTeacher.name}}</view> -->
				<view>{{chooseTeacher.real_name}}</view>
				<u-icon name="plus-circle" color="#2979ff" size="35" style="margin-right: 50rpx;"></u-icon>
			</view>
		</view>
		<view>
			<text>监护人</text>
			<u-input v-model="stutentPersonalData.parent" :clearable="false" type="text" :border="false" />
		</view>
		<view class="title-count-icon">
			<text>监护人电话</text>
			<view>
				<u-input v-model="stutentPersonalData.parent_phone" :clearable="false" type="text" :border="false" />
				<u-icon @click="callPhone(stutentPersonalData.parent_phone)" name="phone" color="#2979ff" size="35"
					style="margin-right: 50rpx;"></u-icon>
			</view>
		</view>
		<view>
			<text>家庭住址</text>
			<u-input v-model="stutentPersonalData.address" :clearable="false" type="text" :border="false" />
		</view>
		<!-- <view class="Prompt-information">
			<text>是否要修改信息~~</text>
			<view class="btn-two">
				<u-button size="medium" plain @click="cancelBtn">取消修改</u-button>
				<u-button size="medium" plain type="primary" @click="determineBtn">确定修改</u-button>
			</view>
		</view> -->

		<!-- 状态select选择框 -->
		<!-- 状态 -->
		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>

		<!-- 班主任 -->
		<u-select v-model="show2" :list="list2" @confirm="confirm2" value-name="id" label-name="name"></u-select>

		<!-- 班级 -->
		<u-select v-model="show3" :list="list3" @confirm="confirm3" value-name="id" label-name="title"></u-select>

		<!-- 性别 -->
		<u-select v-model="show4" :list="list4" @confirm="confirm4"></u-select>

		<!-- 年级 -->
		<u-select v-model="show5" :list="list5" @confirm="confirm5" value-name="id" label-name="title"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 学生id
				studentId: '',
				// 学生个人信息
				stutentPersonalData: {},

				//状态选择框
				show: false,
				list: [ //状态列表
					{
						value: '1',
						label: '在校'
					}, {
						value: '0',
						label: '休学'
					}, {
						value: '-1',
						label: '退学'
					}, {
						value: '-2',
						label: '毕业'
					}, {
						value: '-3',
						label: '长假'
					}, {
						value: '-4',
						label: '短假'
					}
				],
				chooseStatus: {},

				//班主任选择框
				show2: false,
				list2: [],
				chooseTeacher: {},

				//班级选择框
				show3: false,
				list3: [],
				chooseClass: {},

				//性别选择框
				show4: false,
				list4: [ //性别列表
					{
						value: '1',
						label: '男'
					}, {
						value: '2',
						label: '女'
					},
				],
				chooseSex: {},

				stutentRes: '',
				parentsRes: '',

				// 年级选择框
				show5: false,
				list5: [],
				chooseGrade: {}
			}
		},
		methods: {
			callPhone(phoneNumber) { //拨打电话
				uni.makePhoneCall({
					phoneNumber: phoneNumber
				})
			},
			confirm(e) { //状态选择
				console.log(e[0]);
				this.chooseStatus = e[0]
			},
			confirm2(e) { //班主任
				console.log(e[0]);
				this.chooseTeacher.id = e[0].value
				// this.chooseTeacher.name = e[0].label
				this.chooseTeacher.real_name = e[0].label
			},
			confirm3(e) { //班级
				console.log(e[0]);
				this.chooseGrade.id = e[0].value
				this.chooseGrade.title = e[0].label
			},
			confirm4(e) { //性别
				console.log(e[0]);
				this.chooseSex = e[0]
			},
			confirm5(e) { // 年级
				console.log(e);
				this.chooseGrade.id = e[0].value
				this.chooseGrade.title = e[0].label
			},
			determineBtn() { //修改确认按键
				// 修改学生个人信息
				let subContent = this.stutentPersonalData
				this.$http(this.$api.studentDetailsChange, {
					id: this.studentId,
					name: subContent.student.name,
					sex: this.chooseSex.value,
					idcard: subContent.student.idcard,
					phone: subContent.student.phone,
					teacher_id: this.chooseTeacher.id,
					status: this.chooseStatus.value,
					classes_id: this.chooseClass.id
				}).then((res) => {
					return
					this.stutentRes = res.code
				})
				// 修改父母信息
				this.$http(this.$api.parentsChange, {
					id: subContent.id,
					address: subContent.address,
					parent: subContent.parent,
					telephone: subContent.telephone,
				}).then((res) => {
					this.parentsRes = res.code
				})
				if (this.stutentRes === this.parentsRes) {
					uni.showToast({
						title: "修改成功！",
						icon: "none",
						mask: true
					})
				} else {
					uni.showToast({
						title: "修改失败！",
						icon: "none",
					})
				}
			},
			cancelBtn() { //修改取消按键
				// uni.reLaunch({
				// 	url: '/pages/myBackstage/student'
				// })
				uni.navigateBack()
			},
			getStudentInformation() { // 学生详细信息
				this.$http(this.$api.studentDetails, {
					id: this.studentId
				}).then((res) => {
					// 班级
					this.list3 = res.data.classes
					this.chooseClass = res.data.list[0].classes

					// 年级
					this.list5 = res.data.grade
					this.chooseGrade = res.data.list[0].grade

					// 班主任
					this.list2 = res.data.teacher
					this.chooseTeacher = res.data.list[0].teacher

					// 状态
					let studentStatus = res.data.list[0].status
					for (let i = 0; i < this.list.length; i++) {
						if (this.list[i].value == studentStatus) {
							this.chooseStatus = this.list[i]
						}
					}

					// 性别
					let studentSex = res.data.list[0].sex
					for (let i = 0; i < this.list4.length; i++) {
						if (this.list4[i].value == studentSex) {
							this.chooseSex = this.list4[i]
						}
					}

					// 学生信息
					this.stutentPersonalData = res.data.list[0]
				})
			},
		},
		onLoad(id) {
			this.studentId = id.id //列表页 - 学生id
			this.getStudentInformation()
		}
	}
</script>

<style scoped>
	.pagesBig>view {
		line-height: 80rpx;
		border-bottom: #c8c9cc 1px solid;
		margin: 10px 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	view>text {
		display: inline-block;
		width: 25%;
		padding-left: 20rpx;
	}

	view>u-input {
		width: 75%;
	}

	/* 班级、电话、状态、班主任、监护人电话 */
	.title-count-icon {
		display: flex;
		align-items: center;
	}

	.title-count-icon>view {
		width: 75%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/* 取消\确认按键 */
	.Prompt-information {
		display: flex;
		flex-direction: column;
		border-bottom: none !important;
	}

	.Prompt-information>text {
		display: block;
		text-align: center;
		width: initial;
		padding-left: initial;
		margin-top: 80rpx;
		letter-spacing: 10rpx;
		color: #c8c9cc;
	}

	.btn-two {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.btn-two>u-button {
		width: 280rpx;
	}

	.btn-two>u-button /deep/ button {
		width: inherit !important;
	}
</style>
